<template>
    <div>
        <el-tabs type="border-card" class="main">
            <el-tab-pane label="下发任务">
                <div>
                    <el-button type="warning" @click="addDialog">新增任务</el-button>
                </div>
                <br />
                <el-table :data="taskData" style="width: 100%" border>
                    <el-table-column prop="id" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="type" label="任务属性">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 0">A</div>
                            <div v-else-if="scope.row.type == 1">B</div>
                            <div v-else-if="scope.row.type == 2">C</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="分配次级">
                        <template slot-scope="scope">
                            <div v-if="scope.row.level == 0">一级</div>
                            <div v-else-if="scope.row.level == 1">二级</div>
                            <div v-else-if="scope.row.level == 2">三级</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isAssess" label="学校年度专项考核">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="editTaskById(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteTaskById(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="布置工作">
                <div>
                    <el-button type="warning" @click="addWorlDialog">布置工作</el-button>
                </div>
                <br />
                <el-table :data="workData" style="width: 100%" border>
                    <el-table-column prop="number" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="managerId" label="负责人"> </el-table-column>
                    <el-table-column prop="helperIds" label="协助人"> </el-table-column>
                    <el-table-column prop="startTime" label="开始日期"> </el-table-column>
                    <el-table-column prop="endTime" label="完成日期"> </el-table-column>
                    <el-table-column prop="isAssess" label="属于学校专项考核工作">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="editWorkById(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteWorkById(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <!--新增任务对话框-->
        <el-dialog title="下发任务" :visible.sync="addTaskDialogVisible" width="90%">
            <el-form :model="addTaskInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="addTaskInfoForm.id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="addTaskInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务属性</span>
                            <el-input v-model="addTaskInfoForm.type" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务分配次级</span>
                            <el-input v-model="addTaskInfoForm.level" :disabled="true"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务创建人</span>
                            <el-select v-model="addTaskInfoForm.allocUserId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务制定部门</span>
                            <el-select v-model="addTaskInfoForm.allocDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="addTaskInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="addTaskInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="addTaskByIdType">保存</el-button>
                <el-button @click="cancelAddDialog">取消</el-button>
            </span>
        </el-dialog>

        <!--修改任务对话框-->
        <el-dialog title="修改任务" :visible.sync="eidtTaskDialogVisible" width="90%">
            <el-form :model="editTaskInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="editTaskInfoForm.id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="editTaskInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务属性</span>
                            <el-input v-model="editTaskInfoForm.type" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务分配次级</span>
                            <el-input v-model="editTaskInfoForm.level" :disabled="true"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发人</span>
                            <el-select v-model="editTaskInfoForm.allocUserId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发部门</span>
                            <el-select v-model="editTaskInfoForm.allocDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="editTaskInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="editTaskInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="pushEditTask">保存</el-button>
                <el-button @click="cancelEditTask">取消</el-button>
            </span>
        </el-dialog>

        <!--新增工作对话框-->
        <el-dialog title="新增工作" :visible.sync="addWorkDialogVisible" width="90%">
            <el-form :model="addWorkInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="addWorkInfoForm.number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="addWorkInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="2">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="addWorkInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>负责人</span>
                            <el-select v-model="addWorkInfoForm.managerId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>协助人</span>
                            <el-select v-model="addWorkInfoForm.helperIds" multiple filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>开始日期</span>
                            <el-date-picker v-model="addWorkInfoForm.startTime" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>结束日期</span>
                            <el-date-picker v-model="addWorkInfoForm.endTime" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 7 }" v-model="addWorkInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="addWorkByTargetId">保存</el-button>
                <el-button @click="cancelAddWorkByTargetId">取消</el-button>
            </span>
        </el-dialog>

        <!--修改工作对话框-->
        <el-dialog title="修改工作" :visible.sync="editWorkDialogVisible" width="90%">
            <el-form :model="editWorkInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="editWorkInfoForm.number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="editWorkInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="2">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="editWorkInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>负责人</span>
                            <el-select v-model="editWorkInfoForm.managerId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>协助人</span>
                            <el-select v-model="editWorkInfoForm.helperIds" multiple filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>开始日期</span>
                            <el-date-picker v-model="editWorkInfoForm.startTime" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <span>结束日期</span>
                            <el-date-picker v-model="editWorkInfoForm.endTime" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 7 }" v-model="editWorkInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="pushEditWorkById">保存</el-button>
                <el-button @click="cancelEditWork">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';
import workApi from '../../../../api/work';
export default {
    props: {
        // 年份名字
        targetYear: String,
        // 年份id
        targetId: String
    },
    data() {
        return {
            collegeYearTestoptions: [],
            teacherOptions: [],
            departmentOptions: [],
            tempDeparts: [],
            tempTeachers: [],
            // 任务列表
            taskData: [],
            // 工作列表
            workData: [],
            addTaskDialogVisible: false,
            eidtTaskDialogVisible: false,
            addWorkDialogVisible: false,
            editWorkDialogVisible: false,
            editWorkInfoForm: {},
            addWorkInfoForm: {},
            addTaskInfoForm: {},
            editTaskInfoForm: {},
            collegeYearTestoptions: [
                {
                    value: '',
                    label: '--'
                },
                {
                    value: 1,
                    label: '是'
                },
                {
                    value: 0,
                    label: '否'
                }
            ],
            departmentId: '',
        };
    },
    methods: {
        // 获取所有部门下发的C类任务
        async getAllDepartC() {
            await workOfYearTargetApi.getWorkOfYearTarget(this.targetId, 2).then((res) => {
                // console.log(res.data);
                this.taskData = res.data;
                this.$forceUpdate();
            });
        },
        // 新增
        addDialog() {
            this.addTaskInfoForm.type = 'C类';
            this.addTaskInfoForm.level = '三级';
            this.addTaskDialogVisible = true;
        },
        cancelAddDialog() {
            this.addTaskInfoForm = {};
            this.addTaskDialogVisible = false;
        },
        // 获取老师和部门
        getTeachersAndDepartments() {
            this.$store.dispatch('getTeachers').then((res) => {
                this.tempTeachers = this.$store.state.teacher.teachers;
                for (let i = 0; i < this.tempTeachers.length; ++i) {
                    this.teacherOptions[i] = {
                        value: this.tempTeachers[i].id,
                        label: this.tempTeachers[i].name
                    };
                }
            });
            this.$store.dispatch('getDepartment').then((res) => {
                this.tempDeparts = this.$store.state.department.department;
                for (let j = 0; j < this.tempDeparts.length; ++j) {
                    this.departmentOptions[j] = {
                        value: this.tempDeparts[j].id,
                        label: this.tempDeparts[j].name
                    };
                }
                // for (let n = 0; n < this.tempDeparts.length; ++n) {
                //     if (this.tempDeparts[n].name == this.taskInfos.acceptDeptId) {
                //         this.departmentId = this.tempDeparts[n].id;
                //     }
                // }
            });
            this.$forceUpdate();
        },
        // 根据年度目标任务的id和等级添加任务
        async addTaskByIdType() {
            (this.addTaskInfoForm.type = 2), (this.addTaskInfoForm.level = 2), (this.addTaskInfoForm.yearTargetId = this.targetId);
            await workOfYearTargetApi.addWorkOfYearTarget(this.targetId, this.addTaskInfoForm.type, this.addTaskInfoForm).then((res) => {
                this.$message.success('新增任务成功');
                console.log(res);
                this.addTaskInfoForm = {};
            });
            this.getAllDepartC();
            this.$forceUpdate();
            this.addTaskDialogVisible = false;
        },
        //  编辑任务
        async editTaskById(id) {
            await workOfYearTargetApi.getWorkOfYearTargetById(id).then((res) => {
                this.editTaskInfoForm = res.data;
                this.editTaskInfoForm.type = 'C类';
                this.editTaskInfoForm.level = '三级';
            });
            this.eidtTaskDialogVisible = true;
        },
        async pushEditTask() {
            this.editTaskInfoForm.type = 2;
            this.editTaskInfoForm.level = 2;
            await workOfYearTargetApi.editWorkOfYearTarget(this.editTaskInfoForm.id, this.editTaskInfoForm).then((res) => {
                console.log(res);
                this.$message.success('更改任务信息成功！');
                this.eidtTaskDialogVisible = false;
                this.getAllDepartC();
                this.$forceUpdate();
            });
        },
        cancelEditTask() {
            this.eidtTaskDialogVisible = false;
            this.editTaskInfoForm = {};
        },
        async deleteTaskById(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await workOfYearTargetApi.removeWorkOfYearTarget(id).then((res) => {
                    this.$message({
                        message: '删除目标任务成功！',
                        type: 'success'
                    });
                });
                this.getAllDepartC();
            }
        },
        // 获取当前部门下布置的工作
        async getWorkByTaskId() {
            await workApi.getWorkById(this.departmentId).then((res) => {
                console.log(res);
                this.workData = res.data;
                for (let i = 0; i < res.data.length; ++i) {
                    this.workData[i].startTime = moment(this.workData[i].startTime).format('YYYY-MM-DD');
                    this.workData[i].endTime = moment(this.workData[i].endTime).format('YYYY-MM-DD');
                }
            });
        },
                // 新增工作方法
        addWorlDialog() {
            this.addWorkDialogVisible = true;
            this.addWorkInfoForm = {};
        },
                // 新增布置的工作
        async addWorkByTargetId() {
            this.addWorkInfoForm.helperIds = this.addWorkInfoForm.helperIds.toString();
            this.addWorkInfoForm.startTime = moment(this.addWorkInfoForm.startTime).format('YYYY-MM-DD');
            this.addWorkInfoForm.endTime = moment(this.addWorkInfoForm.endTime).format('YYYY-MM-DD');
            this.addWorkInfoForm.targetId = this.departmentId;
            await workApi.addWorkByTargetId(this.departmentId, this.addWorkInfoForm).then((res) => {
                this.$message.success('布置任务成功！');
                this.getWorkByTaskId();
                this.addWorkDialogVisible = false;
            });
        },
                cancelAddWorkByTargetId() {
            this.addWorkInfoForm = {};
            this.addWorkDialogVisible = false;
        },
        async editWorkById(id) {
            await workApi.getWorkByIdEdit(id).then((res) => {
                this.editWorkInfoForm = res.data;
                let reslut = [];
                let arrString = this.editWorkInfoForm.helperIds.split(',');
                for (let arr in arrString) {
                    reslut.push(arrString[arr]);
                }
                this.editWorkInfoForm.helperIds = reslut;
                this.editWorkDialogVisible = true;
            });
        },
        cancelEditWork() {
            this.editWorkDialogVisible = false;
            this.editWorkInfoForm = {};
        },
        async pushEditWorkById() {
            this.editWorkInfoForm.helperIds = this.editWorkInfoForm.helperIds.toString();
            
            this.editWorkInfoForm.startTime = moment(this.editWorkInfoForm.startTime).format('YYYY-MM-DD');
            this.editWorkInfoForm.endTime = moment(this.editWorkInfoForm.endTime).format('YYYY-MM-DD');
            await workApi.editWorkById(this.editWorkInfoForm.id, this.editWorkInfoForm).then((res) => {
                this.$message.success('更改工作信息成功！');
                this.editWorkDialogVisible = false;
                this.getWorkByTaskId();
            });
        },
        async deleteWorkById(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await workApi.deleteWorkById(id).then((res) => {
                    this.$message({
                        message: '删除目标任务成功！',
                        type: 'success'
                    });
                });
                this.getWorkByTaskId();
            }
        }

    },
    watch: {
        targetId() {
            this.departmentId =this.$store.state.user.deptId
            this.getAllDepartC();
            this.getTeachersAndDepartments();
            this.getWorkByTaskId()
        }
    }
};
</script>

<style scoped>
.main {
    color: #606266;
}
</style>